<template>
<div class="page-body" v-loading="false">
    <div class="page-header">
    <h1 class="page-title">驾驶得分</h1>
    <el-breadcrumb>
      <el-breadcrumb-item :to="{path: '/'}">首页</el-breadcrumb-item>
      <el-breadcrumb-item >驾驶得分</el-breadcrumb-item>
    </el-breadcrumb>
  </div>
  <center>

    <h1>
      您的驾驶行为得分
    </h1>
    查看日期：<el-date-picker
        v-model="date"
        type="date"
        :clearable="false"
        @change="changeDate"
        :picker-options="pickerOptions"
        placeholder="选择日期">
      </el-date-picker>
    <h2>
      <!-- {{formatDate(date,'yyyy/MM/dd')}} -->
    </h2>
    <span class="grade">
      {{safeStr}}
    </span>
    <br>
  <el-button  @click="show = !show" class="explain" type="text">
        <span >这些得分代表什么?</span>
  </el-button>
   <el-row>
    <el-col :offset="6" :span="12">
      <el-card>
       <div id="radarChart">
       </div>
      </el-card>
    </el-col>
  </el-row>
  </center>
  <el-dialog class="dialog" title="得分说明" :visible.sync="show">
    <span>
    驾驶行为得分
    </span>
      <div class="top_line"></div>
    <div class="container">
      <br>
    <div>
    <span>依据车速、出行、疲劳、夜行、四急这五个方面的驾驶行为，做出分析得到的综合评分车速</span>
    </div>
    <div style="width:100%" class="row">
      <span style="color:#57D1C9">车速</span>
      <div class="container_line"></div>
    </div>
    <div style="width:100%" class="row">
      <div class="vertical"></div>
      <span>评测您日常驾驶出行的平均车速和超速行为</span>
    </div>
    <div style="width:100%" class="row">
      <span style="color:#ED5485">出行</span>
      <div class="container_line"></div>
    </div>
    <div style="width:100%" class="row">
      <div class="vertical"></div>
      <span>评测您当日的行驶时长与行驶里程</span>
    </div>
    <div style="width:100%" class="row">
      <span style="color:#ED5485">疲劳</span>
      <div class="container_line"></div>
    </div>
    <div style="width:100%" class="row">
      <div class="vertical"></div>
      <span>评测您的连续驾驶时长和疲劳驾驶程度</span>
    </div>
    <div style="width:100%" class="row">
      <span style="color:#7A57D1">夜行</span>
      <div class="container_line"></div>
    </div>
    <div style="width:100%" class="row">
      <div class="vertical"></div>
      <span>评测您夜间驾驶的时长和平均车速</span>
    </div>
    <div style="width:100%" class="row">
      <span style="color:#FFE869">四急</span>
      <div class="container_line"></div>
    </div>
    <div style="width:100%" class="row">
      <div class="vertical"></div>
      <span>评测您在开车过程中不良行为的频度，其中包括急加速、急减速、急刹车和急转弯</span>
    </div>
    </div>
    <br>
    <div class="bottom">
      <span>分数对应怎样的安全级别？</span>
      <div style="width:165px;height:3px;background:#7A57D1;" ></div>
      <br>
      <div style="width:100%">
        <div class="bottom_level">
          <span>安全</span>
        </div>
        <div class="bottom_level">
          <span>较安全</span>
        </div>
        <div class="bottom_level">
          <span>提高警惕</span>
        </div>
        <div class="bottom_level">
          <span>危险驾驶</span>
        </div>
        <div class="bottom_level">
          <span>
            非常危险
          </span>
        </div>
      </div>
    <div style="width:100%;position: relative;bottom: 10px;">
        <div class="bottom_level">
          <div class="bottom_level_line"></div>
        </div>
        <div class="bottom_level">
          <div class="bottom_level_line"></div>
        </div>
        <div class="bottom_level">
          <div class="bottom_level_line"></div>
        </div>
        <div class="bottom_level">
          <div class="bottom_level_line"></div>
        </div>
        <div class="bottom_level">
          <div class="bottom_level_line"></div>
        </div>
      </div>
            <div style="width:100%;position: relative;bottom: 10px;">
        <div class="bottom_level">
          <span>90-100</span>
        </div>
        <div class="bottom_level">
          <span>70-89</span>
        </div>
        <div class="bottom_level">
          <span>50-69</span>
        </div>
        <div class="bottom_level">
          <span>30-49</span>
        </div>
        <div class="bottom_level">
          <span>
            0-29
          </span>
        </div>
      </div>
    </div>
  </el-dialog>


</div>
</template>
<script type="text/javascript">
import echarts from 'echarts'
import Vue from 'Vue'
import {formatDate} from '@/utils/date.js'
import { getGradeByDate } from '@/apis/grade'
Vue.use(echarts)
export default {
  mounted () {
    getGradeByDate(this.formatDate(this.date, 'yyyy/MM/dd')).then(e => {
      this.grade = e.data
      this.fixData(e.data)
      this.chart = echarts.init(document.getElementById('radarChart'))
      // 配置开始
      var radarOption = {
        tooltip: {},
        title: {
          text: e.data.synthesizeScore,
          x: 'center',
          y: 'center',
          textStyle: {
            color: '#333',
            fontWeight: 'bolder',
            fontSize: 64
          }
        },
        backgroundColor: '#ffffff',
        color: ['#37A2DA'],
        radar: {
          shape: 'circle',
          name: {
            textStyle: {
              color: '#999999',
              fontSize: 18
            }
          },
          splitArea: {
            areaStyle: {
              color: ['#fff', '#fff', '#fff', '#fff'],
              shadowColor: '#37A2DA'
            }
          },
          indicator: [{
            name: '车速',
            max: 100
          },
          {
            name: '出行',
            max: 100
          },
          {
            name: '疲劳',
            max: 100
          },
          {
            name: '夜行',
            max: 100
          },
          {
            name: '四急',
            max: 100
          }
          ]
        },
        series: [{
          type: 'radar',
          data: [{
            value: e.data.scores,
            name: '驾驶行为得分',
            label: {
              normal: {
                show: true,
                fontSize: 18,
                formatter: function (params) {
                  return params.value
                }
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(5, 128, 242, 0.8)'
              }
            },
            areaStyle: {
              normal: {
                color: '#37A2DA'
              }
            }
          }]
        }]
      }
      // 配置结束
      this.chart.setOption(radarOption)
    })
  },
  computed: {
    safeStr: function () {
      if (this.grade.synthesizeScore >= 90 && this.grade.synthesizeScore <= 100) {
        return '安全'
      } else if (this.grade.synthesizeScore >= 70 && this.grade.synthesizeScore <= 89) {
        return '较安全'
      } else if (this.grade.synthesizeScore >= 50 && this.grade.synthesizeScore <= 69) {
        return '提高警惕'
      } else if (this.grade.synthesizeScore >= 30 && this.grade.synthesizeScore <= 49) {
        return '危险驾驶'
      } else {
        return '非常危险'
      }
    }
  },
  data () {
    return {
      date: new Date(),
      show: false,
      chart: {},
      grade: {},
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() >= Date.now() - 8.64e6
        }
      }
    }
  },
  methods: {
    formatDate,
    setChart (grade) {
      // var radarChart = echarts.init(document.getElementById('radarChart'))
      // 配置开始
      var radarOption = {
        tooltip: {},
        title: {
          text: this.grade.synthesizeScore,
          x: 'center',
          y: 'center',
          textStyle: {
            color: '#333',
            fontWeight: 'bolder',
            fontSize: 64
          }
        },
        backgroundColor: '#ffffff',
        color: ['#37A2DA'],
        radar: {
          shape: 'circle',
          name: {
            textStyle: {
              color: '#999999',
              fontSize: 18
            }
          },
          splitArea: {
            areaStyle: {
              color: ['#fff', '#fff', '#fff', '#fff'],
              shadowColor: '#37A2DA'
            }
          },
          indicator: [{
            name: '车速',
            max: 100
          },
          {
            name: '出行',
            max: 100
          },
          {
            name: '疲劳',
            max: 100
          },
          {
            name: '夜行',
            max: 100
          },
          {
            name: '四急',
            max: 100
          }
          ]
        },
        series: [{
          type: 'radar',
          data: [{
            value: grade.scores,
            name: '驾驶行为得分',
            label: {
              normal: {
                show: true,
                fontSize: 18,
                formatter: function (params) {
                  return params.value
                }
              }
            },
            itemStyle: {
              normal: {
                color: 'rgba(5, 128, 242, 0.8)'
              }
            },
            areaStyle: {
              normal: {
                color: '#37A2DA'
              }
            }
          }]
        }]
      }
      // 配置结束
      this.chart.setOption(radarOption)
    },
    changeDate () {
      getGradeByDate(this.formatDate(this.date, 'yyyy/MM/dd')).then(e => {
        this.grade = e.data
        this.fixData(this.grade)
        this.setChart(this.grade)
      })
    },
    fixData (grade) {
      grade.synthesizeScore = parseInt(this.grade.synthesizeScore)

      grade.scores[0] = parseInt(this.grade.scores[0])
      grade.scores[1] = parseInt(this.grade.scores[1])
      grade.scores[2] = parseInt(this.grade.scores[2])
      grade.scores[3] = parseInt(this.grade.scores[3])
      grade.scores[4] = parseInt(this.grade.scores[4])
    }
  },
  name: 'driveGrade'
}
</script>
<style type="text/css" scoped>
.page-body{
  padding: 15px;
}
.page-body .page-header{
  background: #fff;
  padding: 15px;
  margin: -15px -15px 15px -15px;
}
.page-body .grade{
  font-size: 20px;
  color: #12afe3;
}
#radarChart{
  height: 500px;
  margin-top: 20px;
}
.explain{
  color: #db450e;
  position: relative;
  left: 100px;
}
.vertical{
    width: 2px;
    height: 20px;
    background: #c2c0c0;
    vertical-align: middle;
    display: inline-block;
    margin-left: 13px;
    margin-right: 13px;
}
.container_line{
  height: 2px;
  width: 90%;
  background: #c2c0c0;
  display: inline-block;
  line-height: 10px;
  position: relative;
  bottom: 5px;
}
.dialog  .row{
  margin-top: 5px;
  margin-bottom: 5px;
}
.top_line {
    height: 3px;
    border-radius: 3px;
    background-color: #f44;
    width: 90px;
}
.bottom_level{
  display: inline-block;
  text-align: center;
  width: 15%;
}
.bottom_level_line{
  display: inline-block;
  height: 3px;
  width: 65px;
  background: gray;
}
</style>
